<template>
	<view class="page">
		<pageTxt>
			<!--  v-model="dataList" @query="queryList" -->
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title="付款单详情" :autoBack="true" :fixed="false"></u-navbar>
					<view class="tab-box">
						<u-tabs
							:current="tabIndex"
							@click="tabClickFunc"
							:list="tablist"
							inactiveStyle="color: #919092;"
							activeStyle="color: #3B75FF;"
							lineColor="#3B75FF"
						></u-tabs>
					</view>
				</template>
				<!-- 内容 -->
				<view class="detail-content-box" v-if="dataObj">
					<template v-if="tabIndex == 0">
						<u-empty
							v-if="!$fieldShowFunc('61-xmxx') && !$fieldShowFunc('61-fkd')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<view class="item-box" v-if="$fieldShowFunc('61-xmxx')">
							<view class="title">项目信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_xmmc')">
								<text class="txt">项目名称</text>
								<view class="content">
									{{ dataObj.project_name }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_xmbh')">
								<text class="txt">项目编号</text>
								<view class="content">
									<text class="txt-btn" @click="navToProjectFunc">
										{{ dataObj.project_number || '--' }}
									</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_xmpp')">
								<text class="txt">项目品牌</text>
								<view class="content">
									{{ dataObj.brand_name }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_xmlx')">
								<text class="txt">项目类型</text>
								<view class="content">
									{{ dataObj.store_type_name }}
								</view>
							</view>
						</view>
						<view class="item-box" v-if="$fieldShowFunc('61-fkd')">
							<view class="title">付款信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_fklx')">
								<text class="txt">付款类型</text>
								<view class="content">
									<template v-if="dataObj.pay_type == 1">工程款</template>
									<template v-if="dataObj.pay_type == 2">供应商货款</template>
									<template v-if="dataObj.pay_type == 3">装修退款</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_glcgjsd') && dataObj.pay_type == 2">
								<text class="txt">关联采购结算单</text>
								<view class="content">
									{{ dataObj.bill_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_gys')">
								<text class="txt">供应商</text>
								<view class="content">
									{{ dataObj.supplier_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_sqje')">
								<text class="txt">申请金额</text>
								<view class="content">{{ dataObj.apply_amount }}元</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_skzh2')">
								<text class="txt">收款账户</text>
								<view class="content">
									{{ dataObj.receive_name }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_fkzh')">
								<text class="txt">付款账户</text>
								<view class="content">
									{{ dataObj.main_name }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_fkzt')">
								<text class="txt">付款状态</text>
								<view class="content">
									<template v-if="dataObj.payment_status == 1">待一审</template>
									<template v-if="dataObj.payment_status == 2">待重新提交</template>
									<template v-if="dataObj.payment_status == 3">待二审</template>
									<template v-if="dataObj.payment_status == 4">待三审</template>
									<template v-if="dataObj.payment_status == 5">已通过，未付款</template>
									<template v-if="dataObj.payment_status == 6">已付款</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_ssqr')">
								<text class="txt">申请人</text>
								<view class="content">
									{{ dataObj.name }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_sqsj')">
								<text class="txt">申请时间</text>
								<view class="content">
									{{ dataObj.created_at }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_xmjsd') && dataObj.pay_type == 3">
								<text class="txt">项目结算单</text>
								<view class="content">
									<text class="txt-btn" v-if="dataObj.project_settlement_number">{{ dataObj.project_settlement_number }}</text>
									<text v-else>--</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_fksy') && dataObj.pay_type == 1">
								<text class="txt">付款事由</text>
								<view class="content">
									<template v-if="dataObj.apply_type == 1">基准收付款(40%)</template>
									<template v-if="dataObj.apply_type == 2">过程验收款(20%)</template>
									<template v-if="dataObj.apply_type == 3">设备调试款(30%)</template>
									<template v-if="dataObj.apply_type == 4">基准尾款(10%)</template>
									<template v-if="dataObj.apply_type == 5">增项基准(100%)</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('sfk_fkbz')">
								<text class="txt">备注</text>
								<view class="content">
									{{ dataObj.remarks || '--' }}
								</view>
							</view>
						</view>
					</template>
					<!-- 历史记录 -->
					<template v-if="tabIndex == 1">
						<view class="item-box">
							<u-empty v-if="!log_list.length" marginTop="300rpx" icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
							<u-steps current="0" direction="column" dot activeColor="#3b75ff" inactiveColor="#3b75ff">
								<u-steps-item v-for="(item, index) in log_list" :key="index">
									<template slot="desc">
										<view class="steps-title flex ac jb">
											<view class="steps-title-title">{{ item.created_at }}</view>
											<view class="steps-title-user-data-box flex ac jc">
												<image class="avater-box" :src="item.image" mode="aspectFit"></image>
												<view class="user-name u-line-1">
													{{ item.name + '-' + item.position }}
												</view>
											</view>
										</view>
										<view class="steps-desc">
											<view class="steps-desc-title">
												<template v-if="item.info_type == 1">提交了付款单</template>
												<template v-if="item.info_type == 2">重新提交了付款单</template>
												<template v-if="item.info_type != 1 && item.info_type != 2">{{ item.form_data.describe }}</template>
											</view>
											<!-- 提交/重新提交 -->
											<template v-if="item.info_type == 1 || item.info_type == 2">
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_fklx')">
													<view class="steps-desc-box-title">付款类型</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.pay_type_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_xmmc')">
													<view class="steps-desc-box-title">项目名称</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.project_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_sqje')">
													<view class="steps-desc-box-title">申请金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.apply_amount ? item.form_data.apply_amount + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_skzh')">
													<view class="steps-desc-box-title">收款账户</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.receive_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_fkzh')">
													<view class="steps-desc-box-title">付款账户</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.main_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_fksy') && item.form_data.pay_type_name == '工程款'">
													<view class="steps-desc-box-title">付款事由</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.apply_type_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_gys') && item.form_data.pay_type_name == '供应商货款'">
													<view class="steps-desc-box-title">供应商</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.supplier_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('sfk_fkbz')">
													<view class="steps-desc-box-title">备注</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.desc || '--' }}
													</view>
												</view>
											</template>
											<!-- 拒绝 -->
											<template v-if="item.opera_status && item.opera_status == 2">
												<view class="steps-desc-box flex ac">
													<view class="steps-desc-box-title">审批意见</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.refuse_desc || '--' }}
													</view>
												</view>
											</template>
											<!-- 同意 -->
											<template v-if="item.opera_status && item.opera_status == 1">
												<view class="steps-desc-box flex ac">
													<view class="steps-desc-box-title">审批意见</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.refuse_desc || '--' }}
													</view>
												</view>
											</template>
										</view>
									</template>
								</u-steps-item>
							</u-steps>
						</view>
					</template>
				</view>
				<view class="bottom-btn-box flex ac jb" slot="bottom">
					<view style="width: 100%" v-if="!loading">
						<judgeBtn
							info
							unborder
							:per_arr="per_arr"
							objectType="payment"
							:btns="btns"
							:state="dataObj.payment_status"
							:item="dataObj"
							@change="btnsChange"
						></judgeBtn>
					</view>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj = ''"></preFileCom>
		<!-- 操作组件 -->
		<paymentOperate :value.sync="per_name" :oper_item="dataObj" @submit="handleSubmit"></paymentOperate>
	</view>
</template>

<script>
export default {
	provide() {
		return {
			providedData: this.btns
		};
	},
	data() {
		return {
			fileObj: '',
			loading: false,
			dataObj: '',
			log_list: [],
			tabIndex: 0,
			tablist: [
				{
					name: '详情'
				},
				{
					name: '历史记录'
				}
			],
			per_arr: [], //权限列表
			// 操作按钮
			btns: [
				{
					per_name: ['gck_gcjlsh', 'gystk_gcbjlsh', 'zxtk_khzjsh'],
					state: 1,
					name: '付款一审'
				},
				{
					per_name: ['gck_zjysh', 'gystk_zjlsh', 'zxtk_zjysh'],
					state: 3,
					name: '付款二审'
				},
				{
					per_name: ['gck_cwsh', 'gystk_cwsh', 'zxtk_cwsh'],
					state: 4,
					name: '付款三审'
				},
				{
					per_name: ['gck_cnsh', 'gystk_cnsh', 'zxtk_cnsh'],
					state: 5,
					name: '付款确认'
				},
				{
					per_name: 'fkd_edit',
					func: (item) => {
						if (item.payment_status == 2 && item.apply_user_id == uni.getStorageSync('userInfo').id) {
							return true;
						} else {
							return false;
						}
					},
					name: '重新提交'
				}
			],
			// 操作相关
			per_name: '',
			oper_item: {}
		};
	},
	onLoad(option) {
		this.getPaymentOrderInfo(option.id);
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/collectionPaymentManagement'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	onShow() {
		if (this.dataObj) {
			this.getPaymentOrderInfo(this.dataObj.id);
		}
	},
	methods: {
		// 操作反馈
		handleSubmit(e) {
			this.onRefresh();
		},
		// 操作事件
		btnsChange(e) {
			let index = 0;
			let name = '';
			if (typeof e.per_name == 'string') {
				this.per_name = e.per_name;
				return;
			}
			switch (Number(e.item.pay_type)) {
				case 1:
					name = 'gck';
					break;
				case 2:
					name = 'gystk';
					break;
				case 3:
					name = 'zxtk';
					break;
				default:
			}
			index = e.per_name.findIndex((i) => {
				return i.includes(name);
			});
			this.per_name = e.per_name[index];
		},
		onRefresh() {
			this.getPaymentOrderInfo(this.dataObj.id);
			this.$refs.paging.complete();
		},
		tabClickFunc(e) {
			this.tabIndex = e.index;
		},
		// 详情
		getPaymentOrderInfo(payment_id) {
			this.loading = true;
			this.$Apipc
				.getPaymentOrderInfo({
					payment_id
				})
				.then((res) => {
					console.log(res, '付款单详情');
					this.loading = false;
					if (res.code == 200) {
						this.log_list = res.data.info_list;
						this.dataObj = res.data;
					}
				});
		},
		// 预览
		previewFunc(item) {
			this.fileObj = item;
		},
		// 去详情项目
		navToProjectFunc() {
			uni.navigateTo({
				url: '/pagesB/projectDetail/projectDetail?id=' + this.dataObj.project_id
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
